<template>
	<div>
		<el-card shadow="never">
			<div slot="header" class="info-tlt">
				<span>基本信息</span>
				<el-button size="small" type="primary" class="info-tlt-btn" @click="onSetHot">
					{{ info.is_hot === 1 ? '取消' : '设为' }}热门
				</el-button>
			</div>
			<ul class="user-education">
				<li class="list-item">赛事名称：{{ info.race_name }}</li>
				<li class="list-item">举办城市：{{ info.city_name }}</li>
				<li class="list-item">报名开始时间：{{ info.apply_start_time }}</li>
				<li class="list-item">报名结束时间：{{ info.apply_end_time }}</li>
				<li class="list-item">赛事开始时间：{{ info.race_start_time }}</li>
				<li class="list-item">赛事结束时间：{{ info.race_end_time }}</li>
				<li class="list-item">是否热门：{{ info.is_hot === 1 ? '是' : '否' }}</li>
			</ul>
			<ul class="user-education">
				<li class="list-item">赛事轮播图：</li>
			</ul>
			<el-row type="flex" style="flex-wrap: wrap; margin: 0 5px">
				<el-image
					v-for="item in info.race_focus_img"
					:key="item"
					style="width: 280px; height: auto; margin: 0 6px 10px"
					:src="item"
					:preview-src-list="info.race_focus_img"
				></el-image>
			</el-row>
			<ul class="user-education">
				<li class="list-item">赛事首图：</li>
			</ul>
			<el-row type="flex" style="margin: 0 5px">
				<el-image
					style="width: 280px; height: auto"
					:src="info.race_img"
					:preview-src-list="[info.race_img]"
				></el-image>
			</el-row>
		</el-card>
		<el-card style="margin: 10px 0" shadow="never">
			<div slot="header" class="info-tlt">赛事组别设置</div>
			<el-row type="flex" align="middle" justify="end" style="margin-bottom: 10px">
				<el-button
					type="primary"
					size="small"
					@click="onSubmitPass()"
					:disabled="!multipleSelection.length"
				>
					中签结果通知
				</el-button>
			</el-row>
			<el-table
				:data="info.groups"
				stripe
				border
				ref="groups"
				highlight-current-row
				size="small"
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="组别编号" prop="group_id" min-width="100px" show-overflow-tooltip />
				<el-table-column
					label="组别名称"
					prop="group_name"
					min-width="120px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="报名截止时间"
					prop="apply_end_time"
					min-width="160px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="支付金额"
					prop="pay_money"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="赞助商折扣价"
					prop="discount_money"
					min-width="110"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="报名人数"
					prop="person_limit"
					min-width="100px"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column
					label="是否亲子跑"
					min-width="100px"
					show-overflow-tooltip
					:formatter="row => (row.is_children === 1 ? '是' : '否')"
				/>
				<el-table-column
					label="共享分组id"
					prop="share_id"
					min-width="100"
					show-overflow-tooltip
					align="center"
				/>
				<el-table-column label="操作" width="150" fixed="right">
					<template slot-scope="{ row }">
						<el-button
							type="text"
							@click="
								$router.push({
									path: '/competition-manage/certificate',
									query: { group_id: row.group_id, race_id: row.race_id }
								})
							"
							v-prevent-click="2000"
						>
							证书生成
						</el-button>
						<el-button
							type="text"
							:underline="false"
							@click="onStopHandle(row)"
							v-prevent-click="2000"
						>
							{{ row.is_stop_apply == 1 ? '开始报名' : '停止报名' }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card shadow="never">
			<div slot="header" class="info-tlt">
				<span>报名用户</span>
				<div style="float: right; margin-top: -5px">
					<el-button
						size="small"
						class="green-btn"
						@click="$refs.sign.init(info, '发布')"
						v-prevent-click="2000"
					>
						发布中签信息
					</el-button>
					<el-button
						size="small"
						type="danger"
						@click="$refs.sign.init(info, '递补')"
						v-prevent-click="2000"
					>
						递补中签信息
					</el-button>
					<el-button size="small" type="info" @click="onExportData" v-prevent-click="2000">
						下载信息表
					</el-button>
				</div>
			</div>
			<el-form
				ref="form"
				:inline="true"
				size="small"
				:model="forms"
				class="form"
				label-width="100px"
			>
				<el-form-item label="用户手机号" prop="mobile">
					<el-input v-model="forms.mobile" placeholder="请输入用户手机号" clearable />
				</el-form-item>
				<el-form-item label="用户姓名" prop="true_name">
					<el-input v-model="forms.true_name" placeholder="请输入用户姓名" clearable />
				</el-form-item>
				<el-form-item label="用户身份证号" prop="cid_no">
					<el-input v-model="forms.cid_no" placeholder="请输入用户身份证号" clearable />
				</el-form-item>
				<p class="line">
					<el-button icon="el-icon-search" type="primary" plain size="small" @click="loadData">
						搜索
					</el-button>
				</p>
			</el-form>
			<el-table
				:data="signData"
				stripe
				border
				highlight-current-row
				size="small"
				:cell-style="() => ({ textAlign: 'center' })"
				:header-cell-style="() => ({ textAlign: 'center' })"
			>
				<el-table-column label="序号" width="60px" type="index" align="center" />
				<el-table-column
					label="用户姓名"
					prop="player_name"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="用户手机号"
					prop="player_mobile"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="性别"
					min-width="100px"
					show-overflow-tooltip
					:formatter="
						row => (row.player.player_sex == 1 ? '男' : row.player.player_sex == 2 ? '女' : '--')
					"
				/>
				<el-table-column
					label="证件类型"
					min-width="100px"
					show-overflow-tooltip
					:formatter="
						row =>
							row.player.player_cid == 1 ? '身份证' : row.player.player_cid == 2 ? '护照' : '--'
					"
				/>
				<el-table-column
					label="证件号码"
					min-width="160px"
					show-overflow-tooltip
					:formatter="row => row.player.player_cid_no || '--'"
				/>
				<el-table-column
					label="报名类型"
					min-width="100px"
					show-overflow-tooltip
					:formatter="
						row =>
							row.player.player_type == 1 ? '成人' : row.player.player_type == 2 ? '儿童' : '--'
					"
				/>
				<el-table-column label="报名时间" prop="add_time" min-width="160px" show-overflow-tooltip />
				<el-table-column label="报名组别" prop="group_name" min-width="100" show-overflow-tooltip />
				<el-table-column
					label="支付状态"
					min-width="120px"
					show-overflow-tooltip
					:formatter="row => (row.is_pay == 1 ? '已支付' : '未支付')"
				/>
				<el-table-column
					label="支付时间"
					min-width="160px"
					show-overflow-tooltip
					:formatter="row => row.pay_time || '--'"
				/>
				<el-table-column
					label="支付金额(元)"
					prop="pay_money"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column label="用户签名" min-width="100px">
					<template slot-scope="{ row }">
						<el-popover placement="right" trigger="click" v-if="row.sign_img">
							<div class="popover">
								<el-image
									style="width: 420px; height: auto"
									:src="row.sign_img"
									fit="contain"
									:preview-src-list="[row.sign_img]"
								></el-image>
							</div>
							<div
								slot="reference"
								:style="{ display: 'block', color: '#3666FF', cursor: 'pointer' }"
							>
								点击查看
							</div>
						</el-popover>

						<span v-else>无</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="退款状态"
					min-width="110"
					show-overflow-tooltip
					:formatter="
						row =>
							row.refund_status == 1
								? '已申请退款'
								: row.refund_status == 2
								? '已退款'
								: row.refund_status == 3
								? '拒绝退款'
								: '--'
					"
				/>
				<el-table-column
					label="退费时间"
					min-width="160px"
					show-overflow-tooltip
					:formatter="row => row.refund_time || '--'"
				/>
				<el-table-column
					label="服装尺码"
					min-width="100px"
					show-overflow-tooltip
					:formatter="row => row.player.player_clothes || '--'"
				/>
				<el-table-column label="参赛号" prop="race_num" min-width="120px" show-overflow-tooltip />
				<el-table-column
					label="领物窗口号"
					prop="window_num"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="存取衣号"
					prop="clothes_num"
					min-width="120px"
					show-overflow-tooltip
				/>
				<el-table-column
					label="是否中签"
					min-width="100"
					show-overflow-tooltip
					:formatter="row => (row.is_compete == 1 ? '是' : '否')"
				/>
				<el-table-column
					label="中签时间"
					min-width="160"
					show-overflow-tooltip
					:formatter="row => (row.compete_time != 0 ? row.compete_time : '--')"
				/>
				<el-table-column label="操作" width="90" fixed="right">
					<template slot-scope="{ row }">
						<el-dropdown
							size="medium"
							placement="bottom"
							trigger="click"
							@command="command => commandChange(command, row)"
						>
							<div style="cursor: pointer">
								<span style="color: #1989fa; font-size: 12px">更多</span>
								<i style="color: #1989fa; font-size: 12px" class="el-icon-arrow-down" />
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item
									command="refund"
									v-prevent-click="2000"
									v-if="
										row.is_pay == 1 &&
										row.refund_status !== 1 &&
										row.refund_status !== 2 &&
										row.pay_money > 0.01
									"
								>
									退费
								</el-dropdown-item>
								<el-dropdown-item command="download" v-prevent-click="2000">
									下载签字协议
								</el-dropdown-item>
								<el-dropdown-item command="edit" v-prevent-click="2000">
									修改参赛信息
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" justify="center">
				<el-col :span="24" style="text-align: right">
					<Pagination
						:total="total"
						:page.sync="pageNo"
						:limit.sync="pageSize"
						scroll-el="el-main"
						@pagination="loadData"
					/>
				</el-col>
			</el-row>
		</el-card>
		<el-card shadow="never" :border="false" style="margin-top: 10px">
			<div slot="header" class="info-tlt">注意事项</div>
			<div class="section-content" style="width: 80%" v-html="info.read_content"></div>
		</el-card>
		<el-card shadow="never" :border="false" style="margin-top: 10px">
			<div slot="header" class="info-tlt">活动介绍</div>
			<div class="section-content" style="width: 80%" v-html="info.race_info"></div>
		</el-card>
		<el-row type="flex" justify="center" style="width: 100%; margin: 12px 0">
			<el-button size="small" style="margin-right: 5px; width: 100px" @click="$router.back()">
				返回
			</el-button>
		</el-row>
		<Shenhe ref="shenhe" />
		<ImportSign ref="sign" />
	</div>
</template>
<script>
	import { deepClone } from '@/utils'
	import { getInfo, hotRace, stopRace, signDownload } from '@/api/competition-manage.js'
	import { adminOrderList, orderRefund, resultNotice } from '@/api/order'
	import { throttle } from '@/utils/utils'
	import Shenhe from '@/views/order-manage/components/shenhe'
	import Pagination from '@/components/Pagination'
	import { paramsObj } from '@/utils/validate'
	import { exportMethod } from '@/utils/export'
	import ImportSign from './components/ImportSign.vue'
	export default {
		components: { Shenhe, Pagination, ImportSign },
		data() {
			return {
				info: {},
				tableData: [],
				signData: [],
				forms: {
					player_name: '',
					player_mobile: '',
					player_cid: ''
				},
				pageNo: 1,
				pageSize: 10,
				total: 0,
				multipleSelection: []
			}
		},
		created() {
			this.getDetailInfo()
			this.loadData()
		},
		methods: {
			async getDetailInfo() {
				const loading = this.$setLoading()
				try {
					const res = await getInfo({ race_id: this.$route.query.id })
					this.info = res.data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			// 搜索
			searchData() {
				this.pageNo = 1
				this.loadData()
			},
			// 分页
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				this.signData = []
				const loading = this.$setLoading()
				const data = {
					...this.forms,
					race_id: this.$route.query.id,
					p: this.pageNo,
					size: this.pageSize
				}
				adminOrderList(data).then(
					res => {
						this.signData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						loading.close()
					}
				)
			},
			onSetHot(row) {
				this.$confirm(`是否将当前赛事设为热门吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(async () => {
						try {
							await hotRace({ race_id: this.$route.query.id, is_hot: 1 })
							this.$set(this.info, 'is_hot', 1)
							this.$message.success('设置成功！')
							loading.close()
						} catch (e) {
							loading.close()
							console.log(e)
						}
					})
					.catch(() => {})
			},
			onStopHandle(row) {
				this.$confirm(
					`确定分组${row.group_name}状态设置为${row.stop_apply == 1 ? '开始报名' : '停止报名'}吗？`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}
				)
					.then(async () => {
						const loading = this.$setLoading({ text: '提交中~' })
						try {
							await stopRace({
								group_id: row.group_id,
								stop_apply: row.is_stop_apply == 1 ? 0 : 1
							})
							loading.close()
							this.$message.success('设置成功！')
							this.getDetailInfo()
						} catch (e) {
							loading.close()
							console.log(e)
						}
					})
					.catch(() => {})
			},
			// 查看证书
			downloadImg: throttle(async function (data) {
				if (!data.sign_img) {
					this.$message.error('无签名图片！')
					return
				}
				try {
					const res = await signDownload({ order_id: data.order_id })
					this.downloadLink(res.data.url, data.player_name + '报名签名')
				} catch (e) {
					console.log(e)
				}
			}, 1500),
			// 退费
			onReturn(data) {
				this.$confirm(`是否确认给${data.name}赛事退费吗？该操作不可逆`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						this.onWhiteListSure(done_selected)
					})
					.catch(() => {})
			},
			onExportData() {
				const loading = this.$setLoading({ text: '数据导出中~' })
				const data = {
					...this.forms,
					race_id: this.$route.query.id,
					export: 1
				}
				adminOrderList(data).then(
					res => {
						loading.close()
						window.location.href = res.data.url
					},
					err => {
						loading.close()
					}
				)
				// exportMethod({
				// 	method: 'get',
				// 	url: '/admin/order/lists',
				// 	params: paramsObj(data)
				// })
			},
			async downloadLink(url, filename) {
				try {
					// 1. 获取图片数据（需服务器允许跨域）
					const response = await fetch(url, { mode: 'cors' })
					const blob = await response.blob()

					// 2. 创建临时下载链接
					const tempUrl = URL.createObjectURL(blob)
					const link = document.createElement('a')

					// 3. 设置下载属性
					link.href = tempUrl
					link.download = filename
					link.style.display = 'none'

					// 4. 触发下载
					document.body.appendChild(link)
					link.click()
					this.$message.success('下载成功！')

					// 5. 清理资源
					setTimeout(() => {
						document.body.removeChild(link)
						URL.revokeObjectURL(tempUrl)
					}, 100)
				} catch (error) {
					console.error('下载失败:', error)
				}
			},
			// 更多操作
			commandChange(cmd, row) {
				if (cmd === 'refund') {
					this.$refs.shenhe.initData(row)
				} else if (cmd === 'download') {
					this.downloadImg(row)
				} else if (cmd === 'edit') {
					this.$router.push({
						path: '/competition-manage/editSign',
						query: { order_id: row.order_id, player_id: row.player.player_id }
					})
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			onSubmitPass() {
				if (this.isLock) return
				this.isLock = true
				this.$confirm('是否确认给勾选的赛事组别参赛人发送中签结果通知？', '发送确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						const loading = this.$setLoading({ text: '提交中，请稍等~' })
						resultNotice({
							race_id: this.info.race_id,
							group_ids: this.multipleSelection.map(item => item.group_id)
						}).then(
							res => {
								this.$message.success('发送成功！')
								this.$refs.groups.clearSelection()
								loading.close()
								this.isLock = false
							},
							err => {
								loading.close()
								this.isLock = false
							}
						)
					})
					.catch(err => {
						console.log(err)
						this.isLock = false
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-tlt {
		line-height: 20px;
		position: relative;
		&:before {
			content: '';
			float: left;
			width: 4px;
			height: 18px;
			background-color: #37a6e5;
			margin-right: 10px;
		}
		&-btn {
			position: absolute;
			right: 15px;
			top: -8px;
		}
	}
	.form {
		padding: 0 10px 0;
		display: flex;
		flex-wrap: wrap;
	}
	.line {
		height: 36px;
		margin: 0 0 10px 18px;
		border-left: 1px solid #e5e6eb !important;
		padding: 0 0 0 18px;
	}
	.avator-box {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 80px;
		margin: 0 15px;
		.hellow {
			margin: 12px 0;
		}
	}
	.user {
		&-education {
			max-width: 100%;
			list-style: none;
			display: flex;
			flex-wrap: wrap;
			justify-content: start;
			// align-content: space-evenly;
			flex-wrap: wrap;
			.list-item {
				font-size: 14px;
				line-height: 32px;
				margin: 0 10px;
				// flex: auto;
				width: calc(25% - 20px);
			}
			::v-deep {
				.el-button--mini {
					height: 30px;
					padding: 3px 10px;
				}
			}
		}
	}
	::v-deep {
		.el-dropdown-menu__item {
			line-height: 34px;
		}
	}
</style>
